<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气卡片展示</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/modern-card.css">
    <link rel="stylesheet" href="css/classic-card.css">
    <link rel="stylesheet" href="css/minimal-card.css">
    <link rel="stylesheet" href="css/dark-theme.css">
    <link rel="stylesheet" href="css/memphis-card.css">
    <link rel="stylesheet" href="css/neopopart-card.css">
    <link rel="stylesheet" href="css/brutalist-card.css">
    <link rel="stylesheet" href="css/extreme-contrast-card.css">
    <link rel="stylesheet" href="css/cyberpunk-card.css">
    <link rel="stylesheet" href="css/neumorphism-card.css">
    <link rel="stylesheet" href="css/premium-modern-card.css">
    <link rel="stylesheet" href="css/dark-mode-card.css">
    <link rel="stylesheet" href="css/chinese-traditional-card.css">
    <link rel="stylesheet" href="css/hand-drawn-card.css">
    <link rel="stylesheet" href="css/visual-motion-card.css">
    <link rel="stylesheet" href="css/expressionism-card.css">
</head>
<body>
    <header>
        <h1>天气卡片展示</h1>
        <p>以下展示了不同风格的天气卡片设计</p>
    </header>

    <main>
        <section class="card-container">
            <h2>现代风格</h2>
            <div id="modern-card-container" class="card-wrapper">
                <!-- 现代风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>经典风格</h2>
            <div id="classic-card-container" class="card-wrapper">
                <!-- 经典风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>简约风格</h2>
            <div id="minimal-card-container" class="card-wrapper">
                <!-- 简约风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>深色主题</h2>
            <div id="dark-theme-card-container" class="card-wrapper">
                <!-- 深色主题天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>孟菲斯风格</h2>
            <div id="memphis-card-container" class="card-wrapper">
                <!-- 孟菲斯风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>新波普艺术</h2>
            <div id="neopopart-card-container" class="card-wrapper">
                <!-- 新波普艺术风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>布鲁塔利斯特</h2>
            <div id="brutalist-card-container" class="card-wrapper">
                <!-- 布鲁塔利斯特风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>极限对比</h2>
            <div id="extreme-contrast-card-container" class="card-wrapper">
                <!-- 极限对比设计风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>赛博朋克</h2>
            <div id="cyberpunk-card-container" class="card-wrapper">
                <!-- 赛博朋克风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>新拟态</h2>
            <div id="neumorphism-card-container" class="card-wrapper">
                <!-- 新拟态设计风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>现代高级</h2>
            <div id="premium-modern-card-container" class="card-wrapper">
                <!-- 现代高级设计风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>暗黑模式</h2>
            <div id="dark-mode-card-container" class="card-wrapper">
                <!-- 暗黑模式设计风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>中国传统</h2>
            <div id="chinese-traditional-card-container" class="card-wrapper">
                <!-- 中国传统风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>手绘风格</h2>
            <div id="hand-drawn-card-container" class="card-wrapper">
                <!-- 手绘风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>视觉动效</h2>
            <div id="visual-motion-card-container" class="card-wrapper">
                <!-- 视觉动效风格天气卡片将在这里动态加载 -->
            </div>
        </section>

        <section class="card-container">
            <h2>表现主义</h2>
            <div id="expressionism-card-container" class="card-wrapper">
                <!-- 表现主义风格天气卡片将在这里动态加载 -->
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 天气卡片设计项目</p>
    </footer>

    <script src="js/app.js"></script>
    <script src="js/weather-api.js"></script>
    <script src="js/card-renderer.js"></script>
</body>
</html>
